手順1：C1TileListBox コントロールを含むアプリケーションの作成

この手順では、Visual Studio で、TileListBox for UWP/WinRT XAML を使用して UWP/WinRT XAML アプリケーションを作成します。

次の手順に従います。

Visual Studio で、［ファイル］→［新規作成］→［プロジェクト］を選択します。
［新しいプロジェクト］ダイアログボックスで、左ペインの言語を展開し、言語の下で［Windows ストア］を選択し、テンプレートリストで［新しいアプリケーション (XAML)］を選択します。名前を入力し、［OK］をクリックしてプロジェクトを作成します。
MainPage.xaml が開いていない場合は開きます。<Grid> タグと </Grid> タグの間にカーソルを置き、１回クリックします。

<Grid> タグと </Grid> タグの間に次の <StackPanel> マークアップを追加して、TextBlock と ProgressBar を含む StackPanel を追加します。

	コードのコピー
<StackPanel x:Name="loading" VerticalAlignment="Center"> <TextBlock Text="YouTubeからデータを取得しています..." TextAlignment="Center"/> <ProgressBar IsIndeterminate="True" Width="200" Height="4"/> </StackPanel>

この TextBlock と ProgressBar は、C1TileListBox が読み込み中であることを示します。

ツールボックスに移動し、C1TileListBox アイコンをダブルクリックして、コントロールをグリッドに追加します。これで、参照と XAML 名前空間が自動的に追加されます。

<Xaml:C1TileListBox> タグを編集して、コントロールをカスタマイズします。

	コードのコピー
<Xaml:C1TileListBox x:Name="tileListBox" ItemsSource="{Binding}" Background="Transparent" Visibility="Collapsed" ItemWidth="800" ItemHeight="600" RefreshWhileScrolling="False"></Xaml:C1TileListBox>

これは、コントロールに名前を付け、コントロールの連結、背景、表示/非表示、サイズ、および更新機能をカスタマイズします。

<Xaml:C1TileListBox> タグと </Xaml:C1TileListBox> タグの間に次のマークアップを追加します。

	コードのコピー
<Xaml:C1TileListBox x:Name="tileListBox" ItemsSource="{Binding}" Background="Transparent" ItemWidth="180" ItemHeight="180" Visibility="Collapsed"> <Xaml:C1TileListBox.PreviewItemTemplate> <DataTemplate> <Grid Background="Gray"/> </DataTemplate> </Xaml:C1TileListBox.PreviewItemTemplate> <Xaml:C1TileListBox.ItemTemplate> <DataTemplate> <Grid Background="LightBlue"> <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/> <TextBlock Text="{Binding Title}" Foreground="White" Margin="4 0 0 4" VerticalAlignment="Bottom"/> </Grid> </DataTemplate> </Xaml:C1TileListBox.ItemTemplate> </Xaml:C1TileListBox>

コードのコピー

<Xaml:C1TileListBox x:Name="tileListBox" ItemsSource="{Binding}"                           Background="Transparent" ItemWidth="180" ItemHeight="180"                           Visibility="Collapsed">
    <Xaml:C1TileListBox.PreviewItemTemplate>
        <DataTemplate>
            <Grid Background="Gray"/>
        </DataTemplate>
            </Xaml:C1TileListBox.PreviewItemTemplate>
            <Xaml:C1TileListBox.ItemTemplate>
        <DataTemplate>
        <Grid Background="LightBlue">
            <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/>
            <TextBlock Text="{Binding Title}" Foreground="White" Margin="4 0 0 4" VerticalAlignment="Bottom"/>
            </Grid>
        </DataTemplate>
    </Xaml:C1TileListBox.ItemTemplate>
</Xaml:C1TileListBox>

このマークアップは、C1TileListBox コントロールのコンテンツのデータテンプレートを追加します。このコントロールの連結はコードで行います。

ここまでの成果

これで、C1TileListBox コントロールを含む UWP/WinRT スタイルのアプリケーションを作成できました。次の「手順2：TileListBox へのデータの追加」では、C1TileListBox にデータを追加します。